<!--
 * @Description: 
 * @Author: Bart 1714877505@qq.com
 * @Date: 2025-04-01
 * @LastEditors: Bart 1714877505@qq.com
 * @LastEditTime: 2025-04-24
-->
<template>
  <div class="ssc-search">
    <a-row :gutter="24">
      <a-col :span="10">
        <a-form-item label="申请日期">
          <a-range-picker v-model:value="searchForm.publishTime" show-time :allowClear="false" format="YYYY-MM-DD HH:mm:ss" valueFormat="YYYY-MM-DD HH:mm:ss" />
        </a-form-item>
      </a-col>
      <a-col :span="7">
        <a-form-item label="状态">
          <a-select v-model:value="searchForm.status" placeholder="请选择状态">
            <a-select-option value="">请选择状态</a-select-option>
            <a-select-option v-for="item in stateList" :key="item.code" :value="item.code">{{ item.lable }}</a-select-option>
          </a-select>
        </a-form-item>
      </a-col>
      <a-col :span="7">
        <a-form-item label="项目" v-bind="validateInfos.requireName">
          <a-input v-model:value="searchForm.requireName" placeholder="请输入项目名称" />
        </a-form-item>
      </a-col>

      <a-col :span="10">
        <a-form-item label="审核日期">
          <a-range-picker v-model:value="searchForm.auditTime" show-time :allowClear="false" format="YYYY-MM-DD HH:mm:ss" valueFormat="YYYY-MM-DD HH:mm:ss" />
        </a-form-item>
      </a-col>
      <a-col :span="14">
        <a-row justify="end">
          <a-button @click="clear()">重置</a-button>
          <a-button class="ml-4" type="primary" @click="search()">查询</a-button>
        </a-row>
      </a-col>
    </a-row>
  </div>
</template>
<script lang="ts" setup>
  import { Form } from 'ant-design-vue'
  import { nextTick, onMounted, reactive, ref, toRaw } from 'vue'

  const emit = defineEmits<(e: 'search', params: RequirementTypes.AttendSearchData) => void>()
  const props = defineProps({
    requireName: { type: String, default: '' },
  })
  const searchForm = reactive<RequirementTypes.AttendSearchData>({
    status: undefined,
    publishTime: [],
    auditTime: [],
    requireName: '',
  })
  const stateList = ref<RequirementTypes.StateData>([
    { code: 1, lable: '待申请' },
    { code: 2, lable: '已审核' },
    { code: 3, lable: '已驳回' },
  ])

  const { validate, validateInfos, resetFields } = Form.useForm(searchForm, {})

  // 清除
  const clear = async () => {
    await resetFields()
    await search()
  }

  // 查询
  const search = () => {
    validate().then(() => {
      nextTick(() => {
        emit('search', {
          ...toRaw(searchForm),
        })
      })
    })
  }

  onMounted(() => {
    if (props.requireName) {
      searchForm.requireName = props.requireName
      emit('search', {
        ...toRaw(searchForm),
      })
    } else {
      search()
    }
  })
</script>
<style lang="less" scoped></style>
